<template>
    <view class="auth-container">
        <!-- 返回按钮 -->
        <view class="back-button" @click="goToWelcome">
            <image class="back-icon" src="/static/back-icon.png"></image>
        </view>

        <view class="header">
            <view class="title-container">
                <text class="title">生命故事盒子</text>
                <text class="subtitle">创建您的账户</text>
            </view>
        </view>

        <!-- 步骤指示器 -->
        <view class="step-indicator">
            <view class="step" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
                <view class="step-number">1</view>
                <text class="step-text">账号信息</text>
            </view>
            <view class="step-line" :class="{ active: currentStep > 1 }"></view>
            <view class="step" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
                <view class="step-number">2</view>
                <text class="step-text">个人信息</text>
            </view>
            <view class="step-line" :class="{ active: currentStep > 2 }"></view>
            <view class="step" :class="{ active: currentStep >= 3 }">
                <view class="step-number">3</view>
                <text class="step-text">用户类型</text>
            </view>
        </view>

        <view class="auth-form">
            <!-- 步骤1：账号密码 -->
            <view v-if="currentStep === 1">
                <view class="form-item">
                    <text class="form-label">账号</text>
                    <input class="form-input" type="text" v-model="useraccount" placeholder="请输入账号" />
                    <text v-if="errors.useraccount" class="error-text">{{ errors.useraccount }}</text>
                </view>

                <view class="form-item">
                    <text class="form-label">密码</text>
                    <input class="form-input" type="password" v-model="password" placeholder="请输入密码" password />
                    <text v-if="errors.password" class="error-text">{{ errors.password }}</text>
                </view>

                <view class="form-item">
                    <text class="form-label">确认密码</text>
                    <input class="form-input" type="password" v-model="confirmPassword" placeholder="请再次输入密码"
                        password />
                    <text v-if="errors.confirmPassword" class="error-text">{{ errors.confirmPassword }}</text>
                </view>
            </view>

            <!-- 步骤2：用户信息 -->
            <view v-if="currentStep === 2">
                <view class="form-item">
                    <text class="form-label">姓名 <text class="required">*</text></text>
                    <input class="form-input" type="text" v-model="userInfo.name" placeholder="请输入您的姓名" />
                    <text v-if="errors.name" class="error-text">{{ errors.name }}</text>
                </view>

                <view class="form-item">
                    <text class="form-label">性别 <text class="required">*</text></text>
                    <view class="gender-selector">
                        <view class="gender-option" :class="{ 'gender-selected': userInfo.gender === '男' }"
                            @click="selectGender('男')">
                            <text class="gender-icon">👨</text>
                            <text class="gender-text">男</text>
                        </view>
                        <view class="gender-option" :class="{ 'gender-selected': userInfo.gender === '女' }"
                            @click="selectGender('女')">
                            <text class="gender-icon">👩</text>
                            <text class="gender-text">女</text>
                        </view>
                    </view>
                    <text v-if="errors.gender" class="error-text">{{ errors.gender }}</text>
                </view>

                <view class="form-item">
                    <text class="form-label">手机号 <text class="required">*</text></text>
                    <input class="form-input" type="number" v-model="userInfo.phone" placeholder="请输入您的手机号"
                        maxlength="11" />
                    <text v-if="errors.phone" class="error-text">{{ errors.phone }}</text>
                </view>

                <view class="form-item">
                    <text class="form-label">生日 <text class="required">*</text></text>
                    <view class="date-picker-container">
                        <picker mode="date" :value="userInfo.birthday" :end="today" @change="onBirthdayChange"
                            class="date-picker">
                            <view class="picker-text">{{ userInfo.birthday || '请选择您的生日' }}</view>
                        </picker>
                        <view class="picker-arrow">▼</view>
                    </view>
                    <text v-if="errors.birthday" class="error-text">{{ errors.birthday }}</text>
                </view>



                <view class="form-item">
                    <text class="form-label">年龄</text>
                    <input class="form-input-age" type="text" :value="calculatedAge" disabled placeholder="由年龄自动计算" />
                </view>

                <view class="form-item">
                    <text class="form-label">出生地</text>
                    <input class="form-input" type="text" v-model="userInfo.birthplace" placeholder="请输入您的出生地" />
                </view>

                <view class="form-item">
                    <text class="form-label">现居地</text>
                    <input class="form-input" type="text" v-model="userInfo.currentLocation" placeholder="请输入您的现居地" />
                </view>
            </view>

            <!-- 步骤3：用户类型 -->
            <view v-if="currentStep === 3" class="role-selection">
                <text class="form-label selection-title">请选择您的身份</text>

                <view class="role-grid">
                    <view class="role-item" :class="{ selected: userInfo.role === 'patient' }"
                        @click="selectRole('patient')">
                        <view class="role-icon patient-icon">
                            <text class="iconfont">👤</text>
                        </view>
                        <text class="role-name">我是患者</text>
                        <view v-if="userInfo.role === 'patient'" class="selected-indicator"></view>
                    </view>

                    <view class="role-item" :class="{ selected: userInfo.role === 'family' }"
                        @click="selectRole('family')">
                        <view class="role-icon family-icon">
                            <text class="iconfont">👪</text>
                        </view>
                        <text class="role-name">我是家属</text>
                        <view v-if="userInfo.role === 'family'" class="selected-indicator"></view>
                    </view>

                    <view class="role-item" :class="{ selected: userInfo.role === 'professional' }"
                        @click="selectRole('professional')">
                        <view class="role-icon professional-icon">
                            <text class="iconfont">👨‍⚕️</text>
                        </view>
                        <text class="role-name">志愿者</text>
                        <view v-if="userInfo.role === 'professional'" class="selected-indicator"></view>
                    </view>

                    <view class="role-item" :class="{ selected: userInfo.role === 'public' }"
                        @click="selectRole('public')">
                        <view class="role-icon public-icon">
                            <text class="iconfont">🌍</text>
                        </view>
                        <text class="role-name">社会公众</text>
                        <view v-if="userInfo.role === 'public'" class="selected-indicator"></view>
                    </view>
                </view>
                <text v-if="errors.role" class="error-text role-error">{{ errors.role }}</text>
            </view>

            <!-- 导航按钮 -->
            <view class="nav-buttons">
                <button v-if="currentStep > 1" class="nav-btn prev-btn" @click="prevStep">上一步</button>
                <button v-if="currentStep < 3" class="nav-btn next-btn" @click="nextStep">下一步</button>
            </view>
            <view class="nav-buttons">
                <button v-if="currentStep === 3" class="auth-btn" @click="register">创建账户</button>
            </view>


            <view class="auth-link" v-if="currentStep === 1">
                <text>已有账号？</text>
                <text class="link" @click="goToLogin">返回登录</text>
            </view>
        </view>
    </view>
</template>

<script>
import { register } from '../../api/user.js';

export default {
    data() {
        return {
            currentStep: 1,
            useraccount: '',
            password: '',
            confirmPassword: '',
            userInfo: {
                name: '',
                phone: '',
                birthday: '',
                gender: '男', // 默认选择男性
                birthplace: '',
                currentLocation: '',
                role: ''
            },
            today: new Date().toISOString().split('T')[0],
            errors: {
                useraccount: '',
                password: '',
                confirmPassword: '',
                name: '',
                phone: '',
                birthday: '',
                gender: '',
                role: ''
            },
            loading: false
        }
    },
    computed: {
        calculatedAge() {
            if (!this.userInfo.birthday) return '';

            const birthDate = new Date(this.userInfo.birthday);
            const today = new Date();

            let age = today.getFullYear() - birthDate.getFullYear();
            const monthDiff = today.getMonth() - birthDate.getMonth();

            if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
                age--;
            }

            return age.toString();
        }
    },
    methods: {
        // 添加返回欢迎页
        goToWelcome() {
            uni.switchTab({
                url: '/pages/login/welcome'
            });
        },

        // 生日选择器变更事件
        onBirthdayChange(e) {
            this.userInfo.birthday = e.detail.value;
        },

        // 选择用户角色
        selectRole(role) {
            this.userInfo.role = role;
        },

        // 选择性别
        selectGender(gender) {
            this.userInfo.gender = gender;
        },

        // 下一步
        nextStep() {
            if (this.currentStep === 1) {
                if (!this.validateStep1()) {
                    return;
                }
            } else if (this.currentStep === 2) {
                if (!this.validateStep2()) {
                    return;
                }
            }

            this.currentStep++;
        },

        // 上一步
        prevStep() {
            if (this.currentStep > 1) {
                this.currentStep--;
            }
        },

        // 验证第一步
        validateStep1() {
            let isValid = true;
            this.errors.useraccount = '';
            this.errors.password = '';
            this.errors.confirmPassword = '';

            if (!this.useraccount.trim()) {
                this.errors.useraccount = '请输入账号';
                isValid = false;
            }

            if (!this.password.trim()) {
                this.errors.password = '请输入密码';
                isValid = false;
            } else if (this.password.length < 8) {
                this.errors.password = '密码长度不能少于8位';
                isValid = false;
            }

            if (!this.confirmPassword.trim()) {
                this.errors.confirmPassword = '请确认密码';
                isValid = false;
            } else if (this.confirmPassword !== this.password) {
                this.errors.confirmPassword = '两次输入的密码不一致';
                isValid = false;
            }

            return isValid;
        },

        // 验证第二步
        validateStep2() {
            let isValid = true;
            this.errors.name = '';
            this.errors.phone = '';
            this.errors.birthday = '';

            if (!this.userInfo.name.trim()) {
                this.errors.name = '请输入姓名';
                isValid = false;
            }

            if (!this.userInfo.phone.trim()) {
                this.errors.phone = '请输入手机号';
                isValid = false;
            } else if (!/^1\d{10}$/.test(this.userInfo.phone)) {
                this.errors.phone = '请输入正确的手机号';
                isValid = false;
            }

            if (!this.userInfo.birthday) {
                this.errors.birthday = '请选择生日';
                isValid = false;
            }

            if (!this.userInfo.gender) {
                this.errors.gender = '请选择性别';
                isValid = false;
            }

            return isValid;
        },

        // 验证第三步
        validateStep3() {
            let isValid = true;
            this.errors.role = '';

            if (!this.userInfo.role) {
                this.errors.role = '请选择您的身份';
                isValid = false;
            }

            return isValid;
        },

        // 注册
        register() {
            // 验证第三步
            if (!this.validateStep3()) {
                return;
            }

            // 显示加载状态
            this.loading = true;
            uni.showLoading({
                title: '注册中...'
            });

            // 准备注册数据
            const registerData = {
                useraccount: parseInt(this.useraccount),
                password: parseInt(this.password),
                userInfo: {
                    name: this.userInfo.name,
                    phone: this.userInfo.phone,
                    birthday: this.userInfo.birthday,
                    gender: this.userInfo.gender,
                    birthplace: this.userInfo.birthplace || '',
                    currentLocation: this.userInfo.currentLocation || '',
                    role: this.userInfo.role
                }
            };

            // 调用注册API
            register(registerData)
                .then(res => {
                    // 注册成功
                    uni.hideLoading();
                    this.loading = false;

                    uni.showToast({
                        title: '注册成功',
                        icon: 'success',
                        duration: 2000
                    });

                    // 延迟跳转到登录页
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages/login/login'
                        });
                    }, 2000);
                })
                .catch(err => {
                    // 注册失败
                    uni.hideLoading();
                    this.loading = false;

                    uni.showToast({
                        title: err.message || '注册失败',
                        icon: 'none',
                        duration: 2000
                    });
                });
        },

        goToLogin() {
            uni.navigateTo({
                url: '/pages/login/login'
            });
        }
    }
}
</script>

<style>
.auth-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 30rpx;
    background-image: url('/assets/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    justify-content: flex-start;
}

/* 返回按钮样式 */
.back-button {
    position: absolute;
    top: 60rpx;
    left: 40rpx;
    width: 80rpx;
    height: 80rpx;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: all 0.3s ease;
}

.back-icon {
    width: 40rpx;
    height: 40rpx;
}

/* 头部样式 */
.header {
    margin-bottom: 15rpx;
    text-align: center;
    padding-top: 20rpx;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40rpx;
}

.title {
    font-size: 48rpx;
    font-weight: bold;
    color: #1c6a3e;
    text-shadow: 2rpx 2rpx 4rpx #32a363;
    margin-bottom: 10rpx;
}

.subtitle {
    font-size: 30rpx;
    color: #1c6a3e;
    text-shadow: 2rpx 2rpx 4rpx #32a363;
    letter-spacing: 2rpx;
}

/* 步骤指示器样式 */
.step-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 650rpx;
    margin-bottom: 15rpx;
    position: relative;
    z-index: 1;
    padding: 5rpx 0;
    animation: fadeIn 0.8s ease-in-out;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.step-number {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    font-weight: bold;
    margin-bottom: 5rpx;
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.step.active .step-number {
    background-color: #32a363;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 6rpx 12rpx rgba(28, 106, 62, 0.3);
}

.step.completed .step-number {
    background-color: #32a363;
    color: white;
    position: relative;
}

.step.completed .step-number::after {
    content: '✔';
    position: absolute;
    font-size: 24rpx;
}

.step-text {
    font-size: 20rpx;
    color: #666;
    transition: all 0.3s ease;
}

.step.active .step-text {
    color: #32a363;
    font-weight: bold;
}

.step-line {
    height: 3rpx;
    background-color: #e0e0e0;
    flex: 1;
    margin: 0 5rpx;
    position: relative;
    top: -23rpx;
    z-index: 1;
    transition: all 0.3s ease;
}

.step-line.active {
    background-color: #32a363;
}

/* 表单样式 */
.auth-form {
    width: 100%;
    max-width: 650rpx;
    background-color: rgba(255, 255, 255, 0.45);
    border-radius: 24rpx;
    padding: 20rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    animation: slideUp 0.8s ease-out;
    backdrop-filter: blur(5px);
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 10rpx;
}

.form-item {
    margin-bottom: 12rpx;
}

.form-label {
    font-size: 30rpx;
    color: #333;
    margin-bottom: 16rpx;
    display: block;
}

.form-input {
    height: 78rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 12rpx;
    padding: 0 24rpx;
    font-size: 30rpx;
    background-color: #f9f9f9;
}

.form-input-age {
    height: 78rpx;
    border: 2rpx solid #d5d5d5;
    border-radius: 12rpx;
    padding: 0 24rpx;
    font-size: 30rpx;
    background-color: #dcdcdc;
}

.error-text {
    color: #FF0000;
    font-size: 22rpx;
    margin-top: 4rpx;
}

/* 导航按钮样式 */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 25rpx;
}

.nav-btn {
    /* padding: 15rpx 30rpx; */
    border-radius: 12rpx;
    font-size: 30rpx;
    border: none;
    width: 300rpx;
    height: 80rpx;
}

.prev-btn {
    background-color: #f0f0f0;
    color: #666;
}

.next-btn {
    background-color: #1c6a3e;
    color: white;
}

.auth-btn {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #1c6a3e;
    color: white;
    border-radius: 12rpx;
    font-size: 30rpx;
    /* font-weight: bold; */
    box-shadow: 0 6rpx 12rpx rgba(28, 106, 62, 0.2);
    transition: all 0.3s ease;
}

/* 必填项标记 */
.required {
    color: #FF0000;
    margin-left: 4rpx;
}

/* 日期选择器样式 */
.date-picker-container {
    position: relative;
    height: 78rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 12rpx;
    background-color: #f9f9f9;
}

.date-picker {
    width: 100%;
    height: 100%;
}

.picker-text {
    height: 78rpx;
    line-height: 78rpx;
    padding: 0 24rpx;
    font-size: 30rpx;
    border-radius: 12rpx;
    color: #777;
    border: 2rpx solid #e0e0e0;
}

.picker-arrow {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 20rpx;
}

/* 性别选择器样式 */
.gender-selector {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10rpx;
}

.gender-option {
    width: 48%;
    height: 78rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 12rpx;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.gender-selected {
    background-color: rgba(50, 163, 99, 0.15);
    border-color: #32a363;
}

.gender-icon {
    font-size: 36rpx;
    margin-right: 10rpx;
}

.gender-text {
    font-size: 30rpx;
    color: #333;
}

/* 角色选择样式 */
.role-selection {
    padding: 10rpx 0;
    animation: fadeIn 0.8s ease-in-out;
    display: flex;
    flex-direction: column;
}

.selection-title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 15rpx;
    display: block;
    text-align: center;
    color: #1c6a3e;
}

.role-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10rpx;
}

.role-item {
    width: 46%;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 15rpx;
    padding: 15rpx 10rpx;
    margin-bottom: 15rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.role-item:active {
    transform: scale(0.98);
}

.role-item.selected {
    background-color: rgba(28, 106, 62, 0.15);
    border: 3rpx solid #1c6a3e;
    box-shadow: 0 8rpx 25rpx rgba(28, 106, 62, 0.2);
}

.role-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10rpx;
    font-size: 50rpx;
    background-color: rgba(28, 106, 62, 0.1);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.role-name {
    font-size: 26rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 5rpx;
}

.selected-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4rpx;
    background-color: #1c6a3e;
    animation: fadeIn 0.3s ease-in-out;
}

.role-error {
    text-align: center;
    margin-top: 10rpx;
    color: #FF0000;
    /* ff4d4sf */
    font-size: 24rpx;
}

.auth-link {
    text-align: center;
    margin-top: 15rpx;
    font-size: 26rpx;
}

.link {
    color: #1c6a3e;
    margin-left: 10rpx;
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30rpx);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}
</style>